<template>
	<view class="content">
		
		<!-- 自定义导航 -->
		<Nav></Nav>
		
		<!-- 轮播图 -->
		<swiper
			class="card-swiper square-dot" 
			:indicator-dots="true" 
			:circular="true"
			:autoplay="true"
			interval="5000"
			duration="500"
			@change="cardSwiper"
			indicator-color="#8799a3"
			indicator-active-color="#0081ff"
		>
			<swiper-item v-for="(item,index) in info" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="recommend-container">
			<view class="title">
				<view class="title-text">推荐课程</view>
				<view class="title-more">更多</view>
			</view>
			<view class="recommend-list">
				<view class="course-item" v-for="(course, index) in courseList"  :key="index">
					<view class="course-img">
						<image class="course-image" mode="widthFix" :src="fileHost + course.headImg"></image>
						<view class="course-sections">{{course.sectionNodeNumber}}课时</view>
					</view>
					<view class="course-info">
						<view class="course-title">
							<view class="course-category">
								{{course.subjectName}}
							</view>
							{{course.name}}
						</view>
						<view class="course-more-info">
							<view class="course-time">{{course.pushTime}}</view>
							<view class="course-number">{{course.studyNumber}}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Nav from '@/components/Navigator/index.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			Nav,
		},
		data() {
			return {
				cardCur: 0,
				info: [
					{
						color:'#77a777',
						url: '/static/banner/1.jpg',
						content: '内容 A'
					},
					{
						color:'#002d54',
						url: '/static/banner/2.jpg',
						content: '内容 B'
					},
					{
						color:'#7731e1',
						url: '/static/banner/3.jpg',
						content: '内容 C'
					}
				],
				courseList: []
			}
		},
		
		computed: {
		   ...mapGetters({
		      host: 'common/host',
			    fileHost: 'common/fileHost'
		   })
		},
		
		onLoad() {
		  this.getRecommendCourseList(1)
		},
			
		methods: {
			
			// 切换当前高亮轮播图
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			
			// 进入课程
			goDetail (item) {
				this.$store.commit('courseInfo/updateCourseInfo', item)
				uni.navigateTo({
					url: '../course/course-detail'
				})
			},
			
			// 获取推荐课程列表
			getRecommendCourseList() {
				const prams = {
					pageNumber:1,
					pageSize:10,
				}
				this.$httpApi.get('/student/courseInfo', prams)
				.then(res => {
					this.courseList = res.data.dataList
				})
			},
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}
	/* #endif */
	
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	/*推荐*/
	.recommend-container{
		width:92vw;
		margin:auto;
		background:#fff;
		border-radius:20upx;
		padding:5vw;
		margin-top:-30upx;
		margin-bottom:40upx;
	}
	/*标题*/
	.title{
		color:#465d63;
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-bottom:1upx solid #e8e8e8;
		padding-bottom:20upx;
	}
	.title .title-text{
		color:#465d63;
		font-size:18px;
		font-weight:700;
	}
	.title .title-more{
		color:#7d8f94;
	}
	/*推荐课程列表*/
	.recommend-list{
		padding:0;
	}
	/*课程*/
	.course-item{
		display:flex;
		padding:40upx 0;
		border-bottom:1upx solid #e8e8e8;
	}
	.course-item:last-child{
		padding-bottom:0;
		border:0;
	}
	.course-img{
		width:36vw;
		height:20.25vw;
		border-radius:16upx;
		overflow: hidden;
		position:relative;
	}
	.course-sections{
		position:absolute;
		top:0;
		left:20upx;
		padding:10upx 16upx;
		font-size:18upx;
		background:#0000002b;
		color:#fff;
	}
	/*课程文字信息*/
	.course-info{
		flex:1;
		padding-left:20upx;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/*课程标题*/
	.course-title{
		font-size:14px;
		font-weight:500;
		color:#555;
		line-height:20px;
		text-align: justify;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;   
	}
	.course-category{
		display:inline-block;
		font-size:10px;
		background:#ff848422;
		color:#ff8484;
		border-radius:6upx;
		padding:0 12upx;
		margin-right:12upx;
		transform: scale(.9);
	}
	.course-more-info{
		display:flex;
	}
	.course-time{
		font-size:12px;
		color:#7d8f94;
		margin-right:20upx;
	}
	.course-number{
		font-size:12px;
		color:#7d8f94;
	}
	
	
	.media-item-line {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 0;
		height: 1rpx;
		background-color: #ebebeb;
	}
	
	.glance-product-list-title{
		border-bottom: 2rpx solid #d0d0d0;
		height: 50px;
		font-size: 20px;
		line-height:50px; 
		text-align: center;
	}
	/* #endif */
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	.uni-media-list-logo {
		width: 210upx;
		height: 180upx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 96upx;
		font-size: 36upx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
</style>

<style scoped>
	.card-swiper /deep/ .uni-swiper-dots{
		position:absolute;
		bottom:90upx;
		height:30upx;
		background:#00000022;
		border-radius:20upx;
		width:auto;
		padding:0 10upx;
	}
	.card-swiper /deep/ .uni-swiper-dot{
		transition: all .5s;
		width:12upx;
		height:12upx;
	}
	.card-swiper /deep/ .uni-swiper-dot-active{
		background:#fff !important;
		width:12upx !important;
	}
</style>
